/**
 * Created by user on 2018/3/20.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import ReplayPlayer from '@utils/ReplayPlayer'
import PlayController from '@utils/PlayController'
import { Type, VoicePlayer } from '@utils/Global'
import { ReplayAction } from '@act'
const { toggleShowType, updateVoiceStatus, updateFooter } = ReplayAction

class ReplayQaTitle extends Component {
  clickBtn = () => {
    const { dispatch, showEnd, qaList } = this.props
    dispatch(toggleShowType('qaScreen', false))
    this.checkVoiceItemPlaying()
    if (!showEnd) {
      ReplayPlayer.start()
      PlayController.start()
      dispatch(updateFooter('isPause', false))
    }
  }
  checkVoiceItemPlaying() {
    const { dispatch, qaList } = this.props
    var playingItem = qaList.filter((_) => {
      return _.type === Type.COMMON_TYPE.COMMON_QA_VOICE && (_.status.playing || _.status.loading)
    })
    if (playingItem.length > 0) {
      const status = {
        loading: false,
        playing: false,
        error: false,
        hasPlayed: true,
      }
      dispatch(updateVoiceStatus(playingItem[0].data.file, status))
      try {
        VoicePlayer.stop()
      } catch(e) {}
    }
  }
  render() {
    const { color_theme } = this.props
    const _className = color_theme === 'red' ? 'qa_title red' : 'qa_title'
    return (
      <div className={_className}>
        课后Q&A
        <div onClick={this.clickBtn} className="replay_qa_title_btn">返回观看回放</div>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return Object.assign({}, state.QaState, {
    color_theme: state.MainScreenState.info.color_theme,
    showEnd: state.ReplayState.showType.endBtn,
    qaList: state.ReplayState.qa.list
  })
}
export default connect(mapStateToProps)(ReplayQaTitle)
